<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- 标准的理想视口 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <title>购物车1</title>
  <!-- 1 引入 4个 样式文件 -->
  <link rel="stylesheet" href="../lib/mui/css/mui.css">
  <link rel="stylesheet" href="../lib/fontawesome/css/font-awesome.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/cart.css">
</head>

<body id="pyg_body">
  <!-- 主要用在显示网页内容1 -->
  <div class="pyg_view">
      <header id="header" class="mui-bar mui-bar-nav">
        <button class="mui-btn mui-btn-blue  mui-pull-left mui-btn-outlined" id="deleteBtn">删除</button>
        <h1 class="mui-title">购物车</h1>
        <button id="editBtn" class="mui-btn mui-btn-blue  mui-pull-right mui-btn-outlined">编辑</button>
      </header>

      <!-- 主要内容 -->
      <div class="pyg_main">
        <!-- 派送地址开始 -->
        <div class="pyg_addr">
          <div class="addr_title">
            派送地址
          </div>
          <div class="addr_content">
            <div class="addr_icon">
              <span class="fa fa-map-marker"></span>
            </div>
            <dl>
              <dt>默认地址</dt>
              <dd>中国台湾钓鱼岛</dd>
            </dl>
          </div>
        </div>
        <!-- 总价部分 -->
        <div class="pyg_total_price">
          <div class="pyg_tp_title">
            总价
          </div>
          <div class="pyg_tp_content">
            <div class="tp_left">
              总价:
              <span class="price_num">￥</span>
            </div>
            <a href="javascript:;" id="order_create_btn">生成订单</a>
          </div>
        </div>
        <!-- sp部分 -->
        <div class="pyg_order">
          <div class="order_title">
            订单
          </div>
          <div class="order_content">
              <ul class="goods_wrap">
                
              </ul>
          </div>
        </div>
        <h1>1</h1>
        <h1>1</h1>
      </div>

      <footer class="pyg_footer">
        <a href="javascript:;">
          <span class="fa fa-home"></span>
          <div>首页</div>
        </a>
        <a href="./pages/category.html">
          <span class="fa fa-list-ul"></span>
          <div>分类</div>
        </a>
        <a href="javascript:;">
          <span class="fa fa-shopping-cart"></span>
          <div>首页</div>
        </a>
        <a href="javascript:;">
          <span class="fa fa-user"></span>
          <div>首页</div>
        </a>
      </footer>

  </div>
</body>

<!-- 模板引擎  data-obj自定义属性 data里面的obj -->
<script id="cart_tp" type="text/html">
  {{each data value}}
  <li data-obj="{{value}}">
      <div class="order_chk order_chk">
          <div class="mui-input-row mui-checkbox">
              <input class="o_chk" type="checkbox">
            </div>
      </div>
      <div class="order_img">
          <img src="{{value.goods_small_logo}}" alt="">
        </div>
        <div class="order_info">
            <!-- 商品的名称 -->
            <div class="goods_name mui-ellipsis-2">
              {{value.goods_name}}
              </div>
            <!-- 数字输入框 -->
            <!-- 存在最小值和最大值 -->
            <div class="mui-numbox" data-numbox-min="1" data-numbox-max="{{value.goods_number}}">
                <!-- "-"按钮，点击可减小当前数值 -->
                <button class="mui-btn mui-numbox-btn-minus" type="button" disabled="">-</button>
                <input class="mui-numbox-input" value="{{value.amount}}" type="number">
                <!-- "+"按钮，点击可增大当前数值 -->
                <button class="mui-btn mui-numbox-btn-plus " type="button">+</button>
              </div>
            <!-- 单价 -->
            <div class="goods_price">
              ￥ <span class="g_price">{{value.goods_price}}</span>
            </div>
          </div>
  </li>
  {{/each}}
</script>

<!-- 2 引入js文件 -->
<script src="../lib/mui/js/mui.js"></script>
<script src="../lib/zepto/zepto.js"></script>
<script src="../lib/arttemplate/template-web.js"></script>
<script src="../js/common.js"></script>
<script src="../js/cart.js"></script>

</html>